﻿@page "/signaturepadResponsive"
@attribute [TabItemOption(Text = "响应式手写签名")]


<h3>Responsive 响应式手写签名</h3>
<pre>设备宽度小于640px(例如手机)自动置顶无边框,宽度小于500px按钮自动旋转. 可选透明背景.
<code style="color:gray">
&lt;SignaturePad OnResult="((e) => { Result=e; ShowSignaturePad = (Result==null); })" EnableChangeColorBtn="false" Responsive="true" BackgroundColor="rgba(0,0,0,0)" SignAboveLabel="" OnClose="() => ShowSignaturePad =false" /&gt;
</code>
</pre>

@if (ShowSignaturePad)
{
    <SignaturePad OnResult="OnResult" EnableChangeColorBtn="false" Responsive="true" BackgroundColor="rgba(0,0,0,0)" SignAboveLabel="" OnClose="OnClose" />
}
else if (Result != null)
{
    <div>
        <p></p>
        <p>您的签名:</p>
        <img src="@Result" style="background-color: beige ; max-width: 80%; " />
    </div>
    <p></p>
<textarea type="text" class="form-control" style="min-width: 100px;max-width: 80%;" rows="6"
          @bind="Result"
          placeholder="Base64" />
    <button class="btn btn-primary"
            type="button"
            @onclick="(() => Result = null)">
        返回前页
    </button>

    <button class="btn btn-primary"
            type="button"
            @onclick="(async () =>SaveResult = await SaveImgBaseSixFour(Result))">
        保存
    </button>
    <a href="@SaveResult">
        @SaveResult
    </a>

}
else
{
    <button class="btn btn-primary"
            type="button"
            @onclick="(() => ShowSignaturePad = !ShowSignaturePad)">
        签名
    </button>
}


@code{

    /// <summary>
    /// 签名Base64
    /// </summary>
    public string? Result { get; set; }

    private Task OnResult(string value)
    {
        ShowSignaturePad = (Result == null);
        Result = value;
        StateHasChanged();
        return Task.CompletedTask;
    }

    private Task OnClose()
    {
        ShowSignaturePad = false;
        return Task.CompletedTask;
    }


    /// <summary>
    /// 显示响应式签名界面
    /// </summary>
    bool ShowSignaturePad { get; set; } = false;

}
